<template>
  <div class="app">
    <van-nav-bar
      title="发表动态"
      left-text=""
      right-text="发表"
      left-arrow
      class="colnav"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-field
      v-model="content"
      autosize
      rows="5"
      type="textarea"
      maxlength="300"
      placeholder="写点什么分享吧..."
      show-word-limit
      class="trendinputfield"
    >
      <template #button>
        <van-uploader v-model="imageslist" :max-count="9" multiple />
      </template>
    </van-field>
    <van-cell is-link>
      <template #title>
        <div style="display: flex; align-items: center">
          <icon-svg
            icon-class="addtrend_huati"
            icon-color="#304056"
            class="trendicon"
          ></icon-svg>
          <span class="custom-title">添加话题</span>
        </div>
      </template>
    </van-cell>
    <van-cell :value="locaiton" is-link>
      <template #title>
        <div style="display: flex; align-items: center">
          <icon-svg
            icon-class="addtrend_location"
            icon-color="#304056"
            class="trendicon"
          ></icon-svg>
          <span class="custom-title">添加位置</span>
        </div>
      </template>
    </van-cell>
    <van-cell is-link>
      <template #title>
        <div style="display: flex; align-items: center">
          <icon-svg
            icon-class="addtrend_public"
            icon-color="#304056"
            class="trendicon"
          ></icon-svg>
          <span class="custom-title">{{ status }}</span>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      imageslist: [],
      locaiton: "",
      huati: [],
      status: "公开·所有人可见",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
}
.trendicon {
  width: 22px;
  height: 22px;
}
.custom-title {
  font-size: 16px;
  margin-left: 3px;
}
</style>
<style>
.trendinputfield .van-cell__value .van-field__body {
  display: block !important;
}
.trendinputfield
  .van-cell__value
  .van-field__body
  .van-field__button
  .van-uploader {
  display: block !important;
}
</style>